<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>分页</title>
  <style>
  *{
	margin:0;
	padding:0;
	list-style:none;
  }
  ul{
	width:580px;
	height:30px;
	margin:100px auto;
	background:rgb(230,230,230);
	padding:8px;
	text-align:center;
  }
  ul li{
	width:25px;
	height:20px;
	border:1px solid black;
	margin-left:5px;
	padding:5px;
	line-height:20px;
	float:left;
	cursor:pointer;
  }

  ul li:nth-child(1){
	color:rgb(116,184,252);
	border:none;
	}

  ul li:nth-child(11){
	width:60px;
	}
  ul li:nth-child(12){
	width:40px;
	}

  </style>
 
 </head>
 <body>
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>下一页></li>
   <li>尾页</li>
  </ul>
 </body>
</html>
